<template>
  <div class="cart">
    <!-- 四个导航 -->
    <ul class="guid">
      <li v-for="(item, i) in guid" :key="i">
        {{ item.name }}
      </li>
    </ul>
    <!-- 全选 -->
    <div class="allc">
      <div class="cllc1">
        <input type="checkbox" @change="checkAll" v-model="allCheck" />

        <span>小U自营</span>
      </div>
      <div class="cllc2">
        <span>已免运费</span>
        <span>|</span>
        <span>领券</span>
      </div>
    </div>
    <!-- 一个间隔 -->
    <div class="kong"></div>
    <!-- 购物车内的内容 -->
    <ul class="carts">
      <li v-for="(item, i) in content" :key="i">
        <div class="cartcon">
          <div class="cartcon1">
            <input type="checkbox" @change="checkone" v-model="item.checked" />
          </div>
          <div class="cartcon2">
            <img :src="item.img" alt="" />
          </div>
          <div class="cartcon3">
            <!--  -->
            <p class="cartcon3a">
              <span>溪牧原山茶花洁面泡沫 氨基...</span>
              <span>敏感肌可用，控油祛痘、男女可...</span>
            </p>
            <!--  -->
            <div>
              <div class="cartcon3b">
                <select name="规格" id="">
                  <option value="">粉色50ML</option>
                  <option value="">绿色50ML</option>
                  <option value="">黑色50ML</option>
                </select>
                <span>比加入时降低￥100</span>
              </div>
            </div>
            <!--  -->
            <div class="cartcon3c">
              <p>
                <span>￥</span>
                <span>{{ item.price }}</span>
                <span>￥1099</span>
              </p>
              <div>
                <!-- 数量 -->
                <van-stepper
                  v-model="item.num"
                  input-width="40px"
                  button-size="0.4rem"
                  @plus="onChange(i)"

                />
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>

    <!--  -->
    <div class="footkong"></div>

    <!-- 底部的结算 -->
    <van-submit-bar
      class="gopay"
      :price="allPrice * 100"
      button-text="结算"
      @submit="onSubmit"
    >
      <input type="checkbox" @change="checkAll" v-model="allCheck" />全选
    </van-submit-bar>
  </div>
</template>
<script>
import { getCartlist, getCartedit,getOrderadd } from "../util/request/api";
import "../assets/css/cart.css";
export default {
  data() {
    return {
      value: 8,
      guid: [
        {
          id: 1,
          name: "商品",
        },
        {
          id: 2,
          name: "评价",
        },
        {
          id: 3,
          name: "详情",
        },
        {
          id: 4,
          name: "推荐",
        },
      ],
      allCheck: false,
      content: [],
      zan: [],
      pay: 0,
    };
  },
  methods: {
    onSubmit() {

      
      getOrderadd()
      .then((res)=>{
        if (res.code = 200) {
          console.log('订单生成了');
        }
      })
      this.$router.push("/pay");
    },
    // 选中全选时
    checkAll() {
      //当选中全选，单选的值每一项都要和全选一致！！！
      // console.log(this.allCheck,'11111')
      this.content.map((item) => {
        // 每一个content的checked都要和allCheck的一样
        item.checked = this.allCheck;
        console.log(item.checked, "hahahha");
      });
    },
    // 选中单条数据时
    checkone(i) {
      console.log(this.content, "item");
      // console.log(i, "单选");
      // console.log(this.content[i].checked, "单选");

      //数组操作方法 every 所有条件都为真，结果返回真，有一个是假 就是假 some是有一个条件是真 结果就是真

      this.allCheck = this.content.every((item) => item.checked);

      // console.log(this.allCheck, "this.allCheck");
    },
    // 点击加号时
    onChange(i) {
      console.log(i, "下标");

      // 
    },
  },
  computed: {
    allPrice() {
      var sum = 0;
      this.content.map((item) => {
        // console.log(item, "555555");
        if (item.checked) {
          sum += item.price * item.num;
          // console.log(sum, 99999999);
        }
      });
      return sum;
    },
  },
  mounted() {
    // 获取uid
    let obj = JSON.parse(sessionStorage.getItem("isLogin"));
    let uid = obj.uid;
    // 获取authorization
    let authorization = sessionStorage.getItem("isLogin")
      ? JSON.parse(sessionStorage.getItem("isLogin")).token
      : "";
    let a = {
      uid,
      authorization,
    };
    console.log(a, "a");
    // 请求购物车
    getCartlist(a).then((res) => {
      console.log(res, "cart.vue");
      console.log(this.content, "item1");
      if (res.code == 200) {
        this.zan = res.list;
        this.zan.map((item) => {
          // item.checked=false
          this.$set(item, "checked", false);
          return item;
        });
        this.content = this.zan;
        console.log(this.content, "hahhah");
      }
    });
    //
  },
};
</script>
<style scoped>
</style>